<template>
<div>
    <div v-if="Preview==false">
        <a-tabs default-active-key="1" @change="tabs_change">
            <a-tab-pane key="1" tab="添加新闻">
                    <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 18 }" >
                        <a-form-item label="新闻类型：">
                            <a-select v-model="news.type" style="width: 220px" @change="Change_select">
                                <a-select-option value="政策信息">政策信息</a-select-option>
                                <a-select-option value="工作动态">工作动态</a-select-option>
                                <a-select-option value="基层信息">基层信息</a-select-option>
                                <a-select-option value="行政区划变更">行政区划变更</a-select-option>
                            </a-select>
                        </a-form-item>
                         <!-- <a-row>
                            <xzqh_s :vertical="vertical" :onlycity="onlycity"></xzqh_s>
                        </a-row> -->
                        <a-form-item label="盟市选择：" v-show="xzqh_s_show">
                             <xzqh_s :vertical="vertical" needyear="false"></xzqh_s>
                             <!-- <a-date-picker @change="onChange" mode="year"/> -->
                             <el-date-picker v-model="theYear" type="year" placeholder="选择年" value-format="yyyy"></el-date-picker>
                             <!-- :onlycity="onlycity" -->
                        </a-form-item>

                        <a-form-item label="新闻标题：">
                            <a-input v-model="news.title"/>
                        </a-form-item>
                        <a-form-item label="新闻时间：">
                            <a-input v-model="news.time" />
                        </a-form-item>
                        <a-form-item label="来源：">
                            <a-input v-model="news.from" />
                        </a-form-item>
                        <a-form-item label="新闻内容：">
                            <el-table :data="contents"  stripe border size="mini"   
                            :highlight-current-row='true' 
                            empty-text="没有新闻内容" 
                            @row-dblclick="dbclickRow"
                            >
                                <el-table-column type="index" width="80" label="序号"  :index="indexbf" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                                <el-table-column prop="type" type="text" label="类型" width="120" align="center" sortable></el-table-column>
                                <el-table-column prop="value.discrible" type="text" label="描述" width="120" align="center" sortable>
                                </el-table-column>
                                <el-table-column prop="value.content" type="text" label="内容" width="120" align="center" sortable :show-overflow-tooltip='true'>
                                </el-table-column>
                                <el-table-column align="right" width="160px" >
                                    <template slot="header" >
                                        <a-button type="dashed" @click="add_content">+</a-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <a-button type="dashed" @click="delete_content(scope)">
                                            <a-icon type="delete"  />
                                        </a-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                            <a-button type="primary" html-type="submit" @click="add_news"> 
                                添加新闻
                            </a-button>
                        </a-form-item>
                    </a-form>
                    <div  class="table-parameter">
                    <div  class="line-dotted"></div>
                    <div   class="new-content-title-wrapper">
                        <div  class="new-content-title" style="cursor: pointer;" @click="preshow">新闻预览</div>
                        <div  class="new-content-line" style="width: 64px;"></div>
                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
        <add_new_content></add_new_content>
    </div>
    <div v-show="Preview">
        <div class="news-detail__content">
            <a-icon type="rollback" style="    float: left;    cursor: pointer;" title="返回" @click="exitPreview"/>
            <h2 class="news-detail__title">{{news.title}}</h2>
            <div class="news-detail__subtitle">
                <span>{{news.time}}</span>
            </div>
            <div>
                <div ref="newsContent" class="newsContent" style="font-size: 0.96rem;"></div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import Bus from '../../../src/bus.js';
import $ from 'jquery';
import xzqh_s from '@/components/map/xzqh_select.vue';
export default {
    data() {
        return {
            form:this.$form.createForm(this, { name: 'news' }),
            contents:[],
            news:{
                type:'工作动态',
                from:'',
                province:{

                }
            },
            Preview:false,
            vertical:'vertical',
            onlycity:'onlycity',
            xzqh_s_show:false,
            theYear:'',
        } 
    },
    components: {
      add_new_content: () => import("@/components/platform/edit/add_new_content.vue"), 
      xzqh_s,
    },
    mounted() {
        Bus.$on('add_new_content', (content) => {
            this.add_new_content(content);
        })
        Bus.$on('regionid_change', (regionid,level,Name,precode) => {
            this.news.province.code=regionid
            this.news.province.precode=precode
        })  
    },
    methods:{
        init(){
            this.contents=[];
            this.news={
                title:'',
                from:'',
                time:'',
                type:'工作动态',
                province:{

                }
            };
            this.Preview=false;
            this.contents=[];

        },
        indexbf(index){
            return index+1;
        },
        Change_select(value){
            if(this.news.type=='行政区划变更'){
                this.xzqh_s_show=true
            }
            else{
                this.xzqh_s_show=false
            }
        },
        add_content(){
            Bus.$emit('set_drawer_title','添加新闻内容');
            Bus.$emit('show_drawer');
        },
        delete_content(scope){
            this.contents.splice(scope.$index,1)
            console.log(scope);
        },
        add_new_content(content){
            console.log(content);
            this.contents.push(content);
            return;
            
        },
        extraNews(){
            let Elements=[];
            this.contents.forEach(element => {
                if(element.type=='文本'){
                    ////element.value.discrible
                    Elements.push(`<p>${element.value.content}</p>`)
                }
                else if(element.type=='图片'){
                    Elements.push(`<p style="text-align: center;"><span><img src="${element.value.content}" title="" style="max-width: 100%;"></span></p>`)
                    if(element.value.discrible){
                        Elements.push(`<p style="text-align: center;"><span><strong ><span>${element.value.discrible}</span></strong></span></p>`)
                    }
                }
                else if(element.type=='视频'){
                    Elements.push(`<p style="text-align: center;"><video class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="420" src="${element.value.content}" data-setup="{}"></video></p>`)
                    if(element.value.discrible){
                        Elements.push(`<p style="text-align: center;"><span><strong ><span>${element.value.discrible}</span></strong></span></p>`)
                    }
                    
                }
                Elements.push(`<p><span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></p>`)
            });
            if(this.news.from){
                Elements.push(`<p ><strong style="color: rgb(0, 122, 170);">来源：${this.news.from}</strong></p>`)
            }
            let contents = Elements.join('');
            this.$refs.newsContent.innerHTML=contents;
        },
        exitPreview(){
            this.Preview=false;
        },
        preshow(){
            if(this.news.time==''){
                this.news.time=new Date().format("yyyy-MM-dd hh:mm:ss")
            }
            else{
                if(this.check_time()==false){
                    this.$message.info('时间格式不合法，请采用yyyy-MM-dd hh:mm:ss 格式');
                    return 
                }
            }
            this.extraNews();
            this.Preview=true;
        },
        check_time(){
            let time=new Date(this.news.time).getTime()
            if(time){
                return true 
            }
            return false
        },
        check_have_pic(){
            let have_pic=false;
            this.contents.forEach(element => {
                if(element.type=='图片'){
                    have_pic=true
                }
            });
            return have_pic;
        },
        add_news(){
            if(this.news.type=='行政区划变更' && this.news.province ==150000){
                this.$message.info('行政区划变更时必须选择所在的盟市');
                return
            }
            if(this.news.type=='行政区划变更' && this.theYear-0 <=0){
                this.$message.info('行政区划变更时必须选择年份');
                return
            }
            if(this.theYear-0>0){
                this.news.year=this.theYear-0
            }
            if(this.news.time==''){
                this.news.time=new Date().format("yyyy-MM-dd hh:mm:ss")
            }
            else{
                if(this.check_time()==false){
                    this.$message.info('时间格式不合法，请采用yyyy-MM-dd hh:mm:ss 格式');
                    return 
                }
            }
            if(this.contents.length==0){
                this.$message.info('没有新闻内容');
                return
            }
            

            this.news.contents=this.contents;
            this.news.havepic=this.check_have_pic();
            this.news.createname="1111"
            let that=this;
            let ajaxSet={
                type:"post",
                async:true,
                dataType:"json",
                url: window.Glod.ajax+"xzqh/add_news?",
                data:{
                    news:JSON.stringify(this.news)
                }
                // xhrFields:{withCredentials: true},
                // crossDomain:true,
            }
            $.ajax(ajaxSet)
            .then(databack=>{
                 if(databack.status==true){
                    that.$message.success('添加新闻成功');
                    that.init();
                }
                else{
                    that.$message.error('添加新闻失败');
                }
            },error=>{
                    that.$message.error('添加新闻失败');
                }
            );


        },
        dbclickRow(row, column, cell, event){
            console.log(row, column, cell, event)
        },
    }
  }
</script>